import { Button, DatePicker, Input, NavBar } from 'antd-mobile'
import Icon from '@/components/Icon'
import classes from './index.module.scss'
import classNames from 'classnames'
import { billListData } from '@/contants/billList'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'
import { addBill } from '@/store/modules/billSlice'
import dayjs from 'dayjs'

const New = () => {
  const navigate = useNavigate()
  // 控制收入支出的切换
  const [billtype, setBillType] = useState('pay')
  const [money, setMoney] = useState()
  const [useFor, setUseFor] = useState('')
  // 时间选择器的显影
  const [showDate, setShowDate] = useState(false)
  const [date, setDate] = useState()
  const getDate = (date) => {
    setDate(date)
    setShowDate(false)
  }

  // 保存账单
  const saveBill = () => {
    const billData = {
      type: billtype,
      money: billtype === 'pay' ? -money : +money,
      date: date === undefined ? new Date() : date,
      useFor: useFor
    }
    console.log(billData)
    addBill(billData)
  }

  return (
    <div className={classes.keepAccounts}>
      <NavBar className={classes.nav} onBack={() => navigate(-1)}>
        记一笔
      </NavBar>

      <div className={classes.header}>
        <div className={classes.ddwType}>
          <Button
            shape="rounded"
            className={classNames(billtype === 'pay' ? classes.selected : '')}
            onClick={() => setBillType('pay')}
          >
            支出
          </Button>
          <Button
            className={classNames(billtype === 'income' ? classes.selected : '')}
            shape="rounded"
            onClick={() => setBillType('income')}
          >
            收入
          </Button>
        </div>

        <div className={classes.ddwFormWrapper}>
          <div className={classes.ddwForm}>
            <div className={classes.date}>
              <Icon type="calendar" className={classes.icon} />
              <span className={classes.text} onClick={() => setShowDate(true)}>
                {date === undefined ? '今天' : dayjs(date).format('YYYY-MM-DD')}
              </span>
              <DatePicker
                className={classes.ddwDate}
                title="记账日期"
                max={new Date()}
                visible={showDate}
                onConfirm={getDate}
                onCancel={() => setShowDate(false)}
                onClose={() => setShowDate(false)}
              />
            </div>
            <div className={classes.ddwInput}>
              <Input
                className={classes.input}
                placeholder="0.00"
                type="number"
                value={money}
                onChange={(value) => setMoney(value)}
              />
              <span className={classes.iconYuan}>¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className={classes.ddwTypeList}>
        {billListData[billtype].map((item) => {
          return (
            <div className={classes.ddwType} key={item.type}>
              <div className={classes.title}>{item.name}</div>
              <div className={classes.list}>
                {item.list.map((item) => {
                  return (
                    <div
                      className={classNames(classes.item, useFor === item.type && classes.selected)}
                      key={item.type}
                      onClick={() => setUseFor(item.type)}
                    >
                      <div className={classes.icon}>
                        <Icon type={item.type} />
                      </div>
                      <div className={classes.text}>{item.name}</div>
                    </div>
                  )
                })}
              </div>
            </div>
          )
        })}
      </div>

      <div className={classes.btns}>
        <Button className={classNames(classes.btn, classes.save)} onClick={saveBill}>
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New
